<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>
    <link href="../Css.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

</head>
<body>

    <div style="width: 500px; height: 500px; margin-left: 500px; margin-top: 0px;">

            <center><h1>EXEMPLOS DE ARQUIVOS CSS</h1></center>

                <p><b>Arquivo css, de um site sobre noticias de cinema,<br/>
                a ideia é centraliza nesse arquivo toda a estilização <br/>
                da pagina, margem, cor, fonte espaçamento, etc.</b></p>

                <p><b>Exemplo 1:</b>
                </p>
                <p>
                root { <br/>
                    display: block;<br/>
                }
                </p>
                <p>
                body{<br/>
                    background:url("Imagens/cinema11.png");<br/>
                    width:1200px;<br/>
                    height:100px;<br/>
                    padding: 0px 0px 0px 80px;<br/>
                }<br/>
                </p>
                <p>
                #topo {<br/>
                    background:url("Imagens/cinema888.png");<br/>
                    width:1120px;<br/>
                    height:125;<br/>
                    margin-left: 15px;<br/>
                    margin-top: 15px;<br/>
                }<br/>
                </p>
                <p>

                #menu<br/>
                {<br/>
                    width:1120px;<br/>
                    height:125;<br/>
                    margin-left: 15px;<br/>
                    margin-top: 15px;<br/>
                    position: relative;<br/>
                    background: url("imagens/menu4.png") repeat-x top left;<br/>
                    -moz-box-shadow: 5px 5px 5px black;<br/>
                    height: 3.5em;<br/>
                    padding: 0em 1.0em 0em 1.0em;<br/>
                }<br/>
                </p>
                <p>
                #menu ul<br/>
                {<br/>
                    position: absolute;<br/>
                    top: 1.1em;<br/>
                }
                </p>
                <p>
                #menu ul li<br/>
                {<br/>
                    position: relative;<br/>
                    display: inline;<br/>

                }<br/>
                </p>
                <p>
                #menu ul li a<br/>
                {<br/>
                    padding: 0.5em 1.0em 0.9em 1.0em;<br/>
                    color: #fff;<br/>
                    text-decoration: none;<br/>

                }<br/>
                </p>
                <p>
                #menu ul li a:hover<br/>
                {<br/>
                    text-decoration: underline;<br/>


                }<br/>
                </p>
                <p>
                #menu ul li a:link<br/>
                {<br/>
                    text-decoration: underline;<br/>

                }<br/>
                </p>
                <p>
                #menu ul li a.active<br/>
                {<br/>
                    background: #8B4513 repeat-x top left;<br/>
                }<br/>
                </p>
                <p>
                #fundo{<br/>
                    width:1150px;<br/>
                    height:1000px;<br/>
                    background:lightgray;<br/>
                    font-family: arial;<br/>

                }<br/>
                </p>
                <p>
                #tituloCorpo{<br/>
                    font-size: 20pt;<br/>
                    width:1000px;<br/>
                    height:50px;<br/>
                    font-family: arial;<br/>
                    margin-left: 20px;<br/>
                    margin-top: 20px;<br/>



                }<br/>
                </p>
                <p>
                #corpo{<br/>
                    width:1120px;<br/>
                    height:600px;<br/>
                    background:ghostwhite;<br/>
                    font-family: arial;<br/>
                    margin-left: 15px;<br/>
                    margin-top: 15px;<br/>

                }v
                </p>
                <p>

                #rodape<br/>
                {<br/>
                    width:1120px;<br/>
                    height:80;<br/>
                    margin-left: 15px;<br/>
                    margin-top: 15px;<br/>
                    position: relative;<br/>
                    background:gray;<br/>
                    color: white;<br/>
                    height: 3em;<br/>
                    padding: 0em 1.0em 0em 1.0em;<br/>

                }<br/>
                </p>
                <p>
                #rodape .left<br/>
                {<br/>
                    position: absolute;<br/>
                    left: 2.0em;<br/>
                    bottom: 1.2em;<br/>
                }
                </p>
                <p>

                #rodape .right<br/>
                {
                    position: absolute;<br/>
                    right: 2.0em;<br/>
                    bottom: 1.2em;<br/>
                }
                </p>
                <p>

                #formulario{<br/>
                        padding: 0em 1.0em 1.0em 1.0em;<br/>
                        background:ghostwhite;<br/>
                        margin:auto;<br/>
                        font-family:"times new roman",time,serif;<br/>
                        font-size: 10pt;<br/>

                }
                </p>
                <p>
                #style{<br/>
                    padding: 0.5em 1.0em 1.0em 6.0em;<br/>
                    margin: auto;<br/>
                    float: left;<br/>
                }
                </p>
       
                <br/><br/>===========================================================
                <br/><br/>
                <b>Arquivo css, de um site sobre de musicas.<br/></b><br/>

                <b>Exemplo 2:</b><br/><br/>




                {<br/>
                    padding: 0em;<br/>
                    margin: 0em;<br/>
                }<br/><br/>

                .opcoes{<br/>
                    text-align:center;<br/>
                }<br/><br/>

                body<br/>
                {<br/>

                    background: url("imagens/fundo8.gif");<br/>
                    padding: 0px 0px 35px 0px;<br/>
                }<br/><br/>

                .first<br/>
                {<br/>
                    width:220px;<br/>
                    float:left;<br/>

                }<br/><br/>

                img<br/>
                {<br/>
                    -moz-box-shadow: 5px 5px 5px black;<br/>
                    border: solid 3px #8B4513;<br/>
                    width:200px;<br/>
                    height:150px;<br/>
                }<br/><br/>


                img.left<br/>
                {<br/>
                    position: relative;<br/>
                    float: left;<br/>
                    margin: 1.5em 1.8em 1.4em 0em;<br/>
                }<br/><br/>

                img.right<br/>
                {<br/>
                    position: relative;<br/>
                    float: right;<br/>
                    margin: 1.5em 15em 1.8em 1.8em;<br/>
                }<br/><br/>


                #search<br/>
                {<br/>
                    position: absolute;<br/>
                    top: 5.5em;<br/>
                    right: 2.0em;<br/>
                    padding-right: 0.0em;<br/>
                }<br/><br/>


                #menu<br/>
                {<br/>

                    position: relative;<br/>
                    background: url("imagens/menu.gif") repeat-x top left;<br/>
                    -moz-box-shadow: 5px 5px 5px black;<br/>
                    height: 3.5em;<br/>
                    padding: 0em 1.0em 0em 1.0em;<br/>
                    margin-bottom: 2px;<br/>

                }<br/><br/>

                #menu ul<br/>
                {<br/>

                    position: absolute;<br/>
                    top: 1.1em;<br/>
                }<br/><br/>

                #menu ul li<br/>
                {<br/>
                    position: relative;<br/>
                    display: inline;<br/>

                }<br/><br/>

                #menu ul li a<br/>
                {<br/>
                    padding: 0.5em 1.0em 0.9em 1.0em;<br/>
                    color: #fff;<br/>
                    text-decoration: none;<br/>

                }<br/><br/>

                #menu ul li a:hover<br/>
                {<br/>
                    text-decoration: underline;<br/>


                }<br/><br/>

                #menu ul li a:link<br/>
                {<br/>
                    text-decoration: underline;<br/>

                }<br/><br/>

                #menu ul li a.active<br/>
                {<br/>
                    background: #8B4513 repeat-x top left;<br/>
                }<br/><br/>


                #menubottom<br/>
                {<br/>

                    height: 14px;<br/>
                    margin-bottom: 1.5em;<br/>

                }<br/><br/>


                #video{<br/>
                    float: left;<br/>
                    padding: 10px 10px 10px 10px;<br/>
                }<br/><br/>

            <a href="Home.html">Voltar ao inicio<br/><br/></a>

        </div>

</body>
</html>